<template>
    <div ref="basicSettingsMain" class="basic-settings-main">
        <adminCard>
            <template v-slot:cardTitle>平臺信息配置</template>
            <template v-slot:cardContent>
                <el-form class="form" ref="form" :model="form" label-width="110px">
                    <el-form-item label="站點標題">
                        <el-input v-model="form.title" placeholder="請輸入"></el-input>
                    </el-form-item>
                    <el-form-item label="站點副標題">
                        <el-input v-model="form.desc" placeholder="請輸入"></el-input>
                    </el-form-item>
                    <el-form-item label="地址欄圖標">
                        <upload :file-list="form.iconFileList" :maxFiles="1"
                            uploadTip="網站圖標是您在瀏覽器標籤頁、書籤欄和移動應用程式中看到的圖標。它應為正方形，像素至少為 512×512" />
                    </el-form-item>
                    <el-form-item label="站點logo圖標">
                        <upload :file-list="form.logoFileList" :maxFiles="1" />
                    </el-form-item>
                    <el-form-item label="平臺聯係方式">
                        <el-input v-model="form.tel" placeholder="請輸入"></el-input>
                    </el-form-item>
                    <el-form-item label="平臺聯係郵箱">
                        <el-input v-model="form.email" placeholder="請輸入"></el-input>
                    </el-form-item>
                    <el-form-item label="平臺聯係">
                        <el-input v-model="form.contacts" placeholder="請輸入"></el-input>
                    </el-form-item>
                    <el-form-item label="平臺地址">
                        <el-input v-model="form.address" placeholder="請輸入"></el-input>
                    </el-form-item>
                    <el-form-item label="facebook鏈接">
                        <el-input v-model="form.facebook" placeholder="請輸入"></el-input>
                    </el-form-item>
                    <el-form-item label="youtobe鏈接">
                        <el-input v-model="form.youtube" placeholder="請輸入"></el-input>
                    </el-form-item>
                    <el-form-item label="ig鏈接">
                        <el-input v-model="form.instagram" placeholder="請輸入"></el-input>
                    </el-form-item>
                    <el-form-item label="版權信息">
                        <el-input v-model="form.copyright" placeholder="請輸入"></el-input>
                    </el-form-item>
                    <el-form-item label="ICP備案號">
                        <el-input v-model="form.icp" placeholder="請輸入"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" :loading="submitLoading" @click="onSubmit">保存</el-button>
                    </el-form-item>
                </el-form>
            </template>
        </adminCard>
    </div>
</template>

<script>
import adminCard from "@/components/admin-card.vue";
import upload from "@/components/upload.vue";
import { Message } from 'element-ui';
import axios from "~/plugins/axios.js";

export default {
    name: "adminBasicSettings",
    layout: "admin",
    ssr: false,
    pageTitle: "系統設置 / 基礎配置",
    components: {
        adminCard,
        upload
    },
    data() {
        return {
            form: {
                title: '',
                desc: '',
                iconFileList: [],
                logoFileList: [],
                tel: '',
                email: '',
                contacts: '',
                address: '',
                facebook: '',
                youtube: '',
                instagram: '',
                copyright: '',
                icp: '',
            },
            submitLoading: false,
            // fileList: [
            //   {
            //     name: '/storage/file/124515cc0b9968b9368e7cb997dbb45504c8f7ee.jpeg',
            //     url: 'http://car-api.shop2023.top/storage/file/124515cc0b9968b9368e7cb997dbb45504c8f7ee.jpeg'
            //   }
            // ]
        };
    },
    mounted() {
        this.getData();
    },
    methods: {
        async onSubmit() {
            this.submitLoading = true;
            this.form.favicon_id = this.form.iconFileList[0].file_id;
            this.form.logo_id = this.form.logoFileList[0].file_id;
            const res = await axios.post('/admin/system.Setting/siteEdit', this.form).finally(() => {
                this.submitLoading = false;
            });
            if (res.code == 200) {
                Message.success('数据保存成功');
            } else {
                Message.error('数据保存失败');
            }
        },
        async getData() {
            const loading = this.$loading({
                lock: true,
                text: '数据加载中',
                target: this.$refs.basicSettingsMain
            });
            const res = await axios.get('/admin/system.Setting/siteInfo', this.form).finally(() => {
                loading.close();
            });
            if (res.code == 200) {
                this.form = res.data;
                this.form.iconFileList = [{ name: res.data.favicon_url, url: res.data.favicon_url, file_id: res.data.favicon_id }];
                this.form.logoFileList = [{ name: res.data.logo_url, url: res.data.logo_url, file_id: res.data.logo_id }];
                console.log(this.iconFileList);
            } else {
                Message.error('数据获取失败');
            }
        }
    }
};
</script>

<style scoped lang="less">
.basic-settings-main {
    .form {
        max-width: 700px;
    }
}
</style>